<template>
	<view class="content">
		<view class="header">
			<view class="search">
				<view class="s_box">
					<view class="left">
						<view class="icon">


							<image src="../../../static/images/shopowner/search.png" mode="aspectFit"></image>


							<image src="../../../static/images/shopowner/search.png" mode="aspectFit"></image>

							<image src="/channel/static/images/search.png" mode="aspectFit"></image>



							<image src="/channel/static/images/search.png" mode="aspectFit"></image>

						</view>
						<input class="uni-input font28" focus placeholder="门店名称" placeholder-style="font-size: 28rpx;" />
					</view>
					<view class="title font28">
						搜索
					</view>
				</view>
			</view>
			<view class="left font26">
				<view class="zong">
					总数7945
				</view>
				<view class="vip">
					会员7944
				</view>
				<view class="pu">
					非会员1
				</view>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="left">
					<view class="title font32 fontw">
						{{item.name}} {{item.phone}}
					</view>
					<view class="type font32">
						{{item.type}}
					</view>
				</view>
				<view class="consumption font28">
					上次消费：{{item.time}}（￥{{item.money}}）
				</view>
				<view class="extension font28">
					推广次数：{{item.num}}次
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					type: '贵宾',
					name: '张先生',
					phone: '13505555555',
					time: '2024-09-07',
					money: '398',
					num: '506'
				}, {
					type: '贵宾',
					name: '张先生',
					phone: '13505555555',
					time: '2024-09-07',
					money: '398',
					num: '506'
				}, {
					type: '贵宾',
					name: '张先生',
					phone: '13505555555',
					time: '2024-09-07',
					money: '398',
					num: '506'
				}, {
					type: '贵宾',
					name: '张先生',
					phone: '13505555555',
					time: '2024-09-07',
					money: '398',
					num: '506'
				}, {
					type: '贵宾',
					name: '张先生',
					phone: '13505555555',
					time: '2024-09-07',
					money: '398',
					num: '506'
				}, {
					type: '贵宾',
					name: '张先生',
					phone: '13505555555',
					time: '2024-09-07',
					money: '398',
					num: '506'
				}, {
					type: '贵宾',
					name: '张先生',
					phone: '13505555555',
					time: '2024-09-07',
					money: '398',
					num: '506'
				}, {
					type: '贵宾',
					name: '张先生',
					phone: '13505555555',
					time: '2024-09-07',
					money: '398',
					num: '506'
				}]
			};
		}
	}
</script>

<style lang="scss">
	.content {
		.header {
			padding: 23rpx 29rpx;
			background-color: #fff;

			.search {
				margin-bottom: 34rpx;

				.s_box {
					background: #F5F5F5;
					border-radius: 50rpx;
					padding: 20rpx 28rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {
						.icon {
							width: 24rpx;
							height: 26rpx;
							margin-right: 26rpx;
							display: flex;
							align-items: center;

							image {
								width: 24rpx;
								height: 26rpx;
							}
						}

						.uni-input {}
					}

					.title {
						color: #333333;
					}
				}
			}

			.left {
				color: #A1A7B2;

				.zong {
					margin-right: 8rpx;
				}

				.vip {
					margin-right: 8rpx;
				}
			}
		}

		.list {
			padding: 0 29rpx;

			.item {
				margin-bottom: 15rpx;
				background-color: #fff;
				padding: 40rpx 27rpx 40rpx 23rpx;
				border-radius: 10rpx;

				.left {
					justify-content: space-between;

					.title {}

					.type {
						color: #ffffff;
						width: 84rpx;
						height: 42rpx;
						border-radius: 10rpx;
						text-align: center;
						line-height: 42rpx;
						background-color: #FFBE96;
					}
				}

				.consumption {
					color: #A1A7B2;
					margin: 28rpx 0;
				}

				.extension {
					color: #A1A7B2;
				}
			}
		}
	}
</style>